<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      th {
        background-color: #ccc;
      }
      td,
      th {
        width: 200px;
        height: 50px;
        text-align: center;
        position: relative;
      }
      input {
        width: 800px;
        height: 50px;
      }
      hr {
        width: 810px;
        margin: 20px 0;
      }
      td span {
        display: inline-block;
        position: absolute;
        left: 20px;
        cursor: pointer;
      }
      td span:hover {
        color: red;
      }
      .bg-xq {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.218);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bg-xq div {
        width: 400px;
        height: 300px;
        background-color: #fff;
        text-align: center;
        position: relative;
      }
      .bg-xq div button {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <Inputs></Inputs>
      <hr />
      <Tables></Tables>
    </div>
    <!-- 文本框组件 -->
    <template id="inputs">
      <div>
        <input
          type="text"
          v-model.trim="bookName"
          placeholder="请输入图书名称，按回车添加"
          @keydown.enter="add"
        />
      </div>
    </template>
    <!-- 表格组件 -->
    <template id="tables">
      <div>
        <table border="1" cellspacing="0" v-show="tableList.length>0">
          <tr>
            <th>id</th>
            <th>书名</th>
            <th>添加时间</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) in tableList">
            <td v-for="value in item">{{value}}</td>
            <td>
              <span @click="isShow=true,showItem=item">详情</span
              ><button @click="tableList.splice(index,1)">删除</button>
            </td>
          </tr>
        </table>
        <Xi :show="isShow" :list="showItem"></Xi>
      </div>
    </template>
    <!-- 详情页组件 -->
    <template id="xi">
      <div class="bg-xq" v-show="show">
        <div>
          <h2>{{list.title}}</h2>
          <p>{{list.title}}的内容</p>
          <button @click="$parent.isShow=false">X</button>
        </div>
      </div>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script>
    // 事件总线
    const bus = new Vue();
    // 输入框组件
    const Inputs = {
      template: "#inputs",
      data() {
        return {
          bookName: "",
        };
      },
      methods: {
        add() {
          if (this.bookName) {
            bus.$emit("send", this.bookName);
            this.bookName = "";
          }
        },
      },
    };
    // 详情弹框组件
    const Xi = {
      template: "#xi",
      props: {
        show: {
          type: Boolean,
          default: false,
        },
        list: {
          type: Object,
          default: () => {
            return {
              title: "默认标题",
            };
          },
        },
      },
    };
    // 表格组件
    const Tables = {
      template: "#tables",
      components: {
        Xi,
      },
      data() {
        return {
          // 表格数据
          tableList: [
            {
              id: 1,
              title: "三国演义",
              time: getTime(),
            },
            {
              id: 2,
              title: "西游记",
              time: getTime(),
            },
            {
              id: 3,
              title: "水浒传",
              time: getTime(),
            },
          ],
          setId: 4, //id
          isShow: false, //弹框是否展示
          showItem: "", //详情页数据
        };
      },
      mounted() {
        bus.$on("send", (data) => {
          this.tableList.push({
            id: this.setId,
            title: data,
            time: getTime(),
          });
          this.setId++;
        });
      },
    };
    // 根
    new Vue({
      el: "#app",
      components: {
        Tables,
        Inputs,
      },
    });

    //获取当前时间
    function getTime() {
      let date = new Date();
      let nowTime =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1) +
        "-" +
        date.getDate() +
        "  " +
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
        ":" +
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
      return nowTime;
    }
  </script>
</html>
